<template>
	<view class="pagebody">
		<view class=""
			style="background: linear-gradient(180deg, RGBA(194, 240, 232, 1) 0%, rgba(240, 246, 245, 1) 0%);">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
		</view>
		<view class="clincontent borderbox">
			<view class="title pos-rel">
				<view class="fz28 fwbold pos-abs beforelog" style="top: 4rpx;left: 0;">
					<image src="@/static/images/broadcast/zb_title.png" style="width: 76rpx;height: 65rpx;" mode="">
					</image>
				</view>
				<view class="fz48 fwbold titletext lineclamp2">
					{{ userDocument.diseaseName }}直播预告
				</view>
			</view>
			<view class="list_card">
				<view class="broadcast_card" v-for="(item,index) in broadcastList" :key="index"
					@click="toBroadcast(item.id)">
					<view class="broadcast_title">
						{{item.title}}
					</view>
					<view class="broadcast_content" v-html="tackleContent(item.content)">
					</view>
					<view class="broadcast_info">
						<view class="info_font">
							推荐指数：{{ item.hits }}
						</view>
						<view class="info_font">
							{{ item.updateTime }}
						</view>
					</view>
				</view>
			</view>
			<!-- 			<page-pagination style="margin-top: 24rpx;" color="#00977C" @change="change" :total="total"
				:pageSize="pagesize" :showBorder="false" :numAround="true">
			</page-pagination> -->
			<view class="pagebox">
				<!-- 统一分页器 -->
				<view class="thepager justify-between align-center">
					<view @click="tonewpage(1)" class="pagebtn" :class="page!=1?'havepage':''">
						上一页
					</view>
					<view class="pageNm">
						<span class="nowpage">{{page}}</span> <span style="margin: 0 8rpx;">/</span>{{pages}}
					</view>
					<view @click="tonewpage(2)" class="pagebtn" :class="page<pages?'havepage':''">
						下一页
					</view>
				</view>
			</view>
		</view>
		<community style="margin-top: 26rpx;"></community>

		<typenews :type="2" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="znNewsList">
		</typenews>
		<consulting></consulting>
		<typenews :type="1" :disname="userDocument.diseaseName" :disid="userDocument.diseaseId" :list="zsNewsList">
		</typenews>
		<aboutdrug :drugList="drugList"></aboutdrug>
		<aboutclinical :clinicalList="clinicalList"></aboutclinical>
		<HotnewsCom></HotnewsCom>
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import community from '../../components/generalcom/community.vue'
	import consulting from '../../components/generalcom/consulting.vue'
	import aboutdrug from '../../components/generalcom/aboutdrug.vue'
	import aboutclinical from '../../components/generalcom/aboutclinical.vue'
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import typenews from '../../components/generalcom/typenews.vue';
	import {
		getInfo
	} from '@/api/login'
	import {
		getBroadcastById,
		selectBroadcastList,
		getDrugList,
		getClinicalList,
		getdisNewsList,
		getotherlist
	} from '@/api/api.js';

	export default {
		components: {
			FixedFoot,
			NavHeader,
			community,
			consulting,
			aboutdrug,
			aboutclinical,
			HotnewsCom,
			typenews
		},
		data() {
			return {
				broadcastList: {},
				boradcastData: {},
				drugList: [],
				clinicalList: [],
				zsNewsList: [],
				znNewsList: [],
				page: 1,
				pagesize: 6,
				total: 50,
				pages: 0,
				user: {},
				userDocument: {},
				diseaseList: [],
			}
		},
		onLoad(option) {
			this.getuser()
			this.selectBroadcastList()

		},
		methods: {
			// 统一分页器事件
			tonewpage(num) {
				if (num == 1) {
					if (this.page != 1) {
						this.page--
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				} else {
					if (this.page < this.pages) {
						this.page++
						this.getNewsList();
						this.topPage();
					} else {
						return
					}
				}
			},
			getuser() {
				getInfo().then(res => {
					this.user = res.user
					this.userDocument = res.userDocument
					let dis = {
						"diseaseId": res.userDocument.diseaseId
					}
					this.diseaseList.push(dis);
					this.getDrugList()
					this.selectClinicalList(this.diseaseList)
					this.zsSelectNewsList()
					this.znSelectNewsList()
				})
			},
			selectBroadcastList() {
				let param = {
					"pageNum": this.page,
					"pageSize": this.pagesize,
					"orderByColumn": "create_time",
					"isAsc": "desc",
				}
				selectBroadcastList(param).then(response => {
					this.broadcastList = response.rows
					this.total = response.total
					this.pages = Math.ceil(this.total / this.pagesize)
				})
			},

			toBroadcast(id) {
				uni.navigateTo({
					url: '/pages/broadcast/index?id=' + id,
				});
			},

			/* 分割字符 */
			tackleContent(content) {
				content = content.replace(/<[^>]+>/g, "");
				if (content.length > 30) {
					content = content.substring(0, 30) + '...<a style="color:#00977C;">[ 详情 ]</a>'
				}
				return content;
			},
			getDrugList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"drugDiseaseList": this.diseaseList.length > 0 ? this.diseaseList : null
				}

				getDrugList(param).then(res => {
					if (res.code == 200) {
						this.drugList = res.rows
					}
				})
			},
			selectClinicalList(diseaseList) {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"clinicalDiseaseList": diseaseList
				}
				getClinicalList(param).then(res => {
					if (res.code == 200) {
						this.clinicalList = res.rows
					}
				})
			},
			zsSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "02",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.zsNewsList = response.rows
				})

			},
			znSelectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type": "01",
					"state": "1",
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": this.userDocument.diseaseId
				}
				getotherlist(param).then(response => {
					this.znNewsList = response.rows
				})
			},

			change(currentPage, type) {
				this.page = currentPage;
				console.log("点击了" + type + "，当前页：" + this.page);
				this.selectBroadcastList();
				this.topPage();
			},
			sizeChange(pageSize) {
				this.pageSize = pageSize;
				console.log("每页", pageSize, "条");
			},
			changeTotal() {
				this.total = 0
			},
			changeCurrentPage() {
				this.page = 0
			},
			topPage() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 30
				})
			},
		}
	}
</script>






<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.clincontent {
			padding: 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.title {
				.beforelog {
					text-align: center;
					line-height: 48rpx;
					width: 76rpx;
					height: 65rpx;
				}

				.titletext {
					color: #303b39;
					line-height: 64rpx;
					text-align: justified;
					text-indent: 90rpx;
				}
			}

			.newscontent {
				color: #293347;
				font-size: 36rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 36rpx;

				::v-deep h2 {
					color: #00977C;
					font-weight: bold;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 36rpx;
					font-size: 40rpx;
				}

				::v-deep h3 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 20rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep h4 {
					color: #293347;
					font-weight: bold;
					margin-top: 16rpx;
					font-size: 18rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep p {
					color: #293347;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
				}

				::v-deep a {
					font-size: 18rpx;
					color: #003399;
				}
			}

			.list_card {
				margin-top: 35rpx;

				.broadcast_card {
					background: #FFFFFF;
					border-radius: 32rpx;
					padding: 24rpx;
					margin-top: 16rpx;

					.broadcast_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 38rpx;
						color: #303B39;
						line-height: 56rpx;
					}

					.broadcast_content {
						font-weight: 500;
						font-size: 32rpx;
						color: #576260;
						line-height: 56rpx;
						margin-top: 8rpx;
					}

					.broadcast_info {
						display: flex;
						justify-content: space-between;
						margin-top: 24rpx;

						.info_font {
							font-weight: 500;
							font-size: 24rpx;
							color: #7E8987;
							line-height: 24px;
						}
					}
				}
			}
		}

		.head {
			height: 110rpx;
			padding: 10rpx 32rpx 0;
			border-bottom: 1px solid #D7DDDC;

			.headtetx {
				font-size: 40rpx;
				display: flex;
				align-items: center;
				height: 100rpx;
				margin-right: 40rpx;
				position: relative;

				.linebox {
					position: absolute;
					bottom: 0;
					width: 220rpx;
					height: 10rpx;
					background: #00D9B2;
					border-radius: 50rpx;
				}
			}

			.ischoose {
				color: #303B39;
				font-weight: 800;
			}

			.nochoose {
				color: #576260;
				font-weight: 400;
			}
		}

		.listbox {
			padding: 0 0 0 24rpx;

			.newscard {
				border-bottom: 1rpx dashed #D7DDDC;
				margin-top: 24rpx;

				.title {
					font-size: 38rpx;
					color: #303B39;
					line-height: 72rpx;
					text-align: left;
				}

				.content {
					font-weight: 500;
					font-size: 32rpx;
					color: #576260;
					line-height: 56rpx;
				}
			}
		}

		.broadcastBox {
			padding: 24rpx;
			border-radius: 32rpx;
			margin-top: 16rpx;
		}

		.pagebox {
			// background: #fff;
			padding: 32rpx 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			// 统一分页器样式
			.thepager {
				.pagebtn {
					width: 178rpx;
					height: 76rpx;
					border: 1px solid #B8C3C1;
					text-align: center;
					line-height: 76rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #303B39;
					background: #fff;
					border-radius: 24rpx;
				}

				.havepage {
					color: #00D9B2 !important;
					border-color: #00D9B2 !important;
				}

				.pageNm {
					font-weight: 400;
					font-size: 32rpx;
					color: #7E8987;

					.nowpage {
						color: #303B39;

					}
				}

			}
		}
	}
</style>